<template>
  <div>
    <el-upload
      v-loading="loadingFlag"
      :action="fileUrl"
      class="file-uploader"
      :on-preview="handlePreview"
      :show-file-list="false"
      :multiple="true"
      :limit="5"
      :on-exceed="handleExceed"
      :on-success="onSuccess"
      :file-list="fileList"
      :on-progress="progressFile"
      :before-upload="fileBefore"
      :headers="headers"
    >
      <el-button v-if="dialogType === 'add'" size="small" type="primary"
        >点击上传</el-button
      > 

      <div v-if="dialogType === 'add'" slot="tip" class="el-upload__tip">
        上传文件不超过20MB
      </div>
      <!-- <el-progress :percentage="progressBar" v-show="isShowProgress"></el-progress> -->
    </el-upload>
    <!-- <el-image-viewer
      v-if="imagePreview"
      :on-close="closeViewer"
      :url-list="[url]"
    /> -->
  </div>
</template>

<script>
import { fileUrl, staticImgUrl } from "@/url";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import { getToken } from "@/utils/auth";
import { setTimeout } from "timers";
export default {
  name: "UploadFile",
  components: {
    ElImageViewer,
  },
  props: {
    files: {
      type: String,
      default: "",
    },
    dialogType: {
      type: String,
      default: "add",
    },
    // imageDate:{
    //    type: Array,
    //   default: [],
    // },
  },
  data() {
    return {
      //  文件列表
      fileList: [],
      resultList: [],
      fileUrl: fileUrl,
      loadingFlag: false,
      imagePreview: false,
      url: "",
    };
  },
  watch: {
    files(val) {
      if (val !== null) {
        if (this.files) {
          this.initFile();
        }
      }
    },

    // imageDate(){
    //   console.log(this.imageDate)
    // },
  },
  created() {
    if (this.files) {
      this.initFile();
    }
  },
  computed: {
    headers() {
      return {
        Authorization: getToken(),
      };
    },
  },
  methods: {
    initFile() {
      if (this.files) {
        this.fileList = JSON.parse(this.files);
        this.resultList = JSON.parse(this.files);
      }
    },
    handlePreview(file) {
      this.url = staticImfgUrl + file.url;
      this.imagePreview = true;
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeAvatarUpload(file) {
      const isLt6M = file.size / 1024 / 1024 < 20;
      if (!isLt6M) {
        this.$message.error("上传头像图片大小不能超过 20MB!");
        this.loadingFlag = false;
      }
      return isLt6M;
    },
    onSuccess(res, file, fileList) {
      this.$emit("pushFile", file);
      this.resultList.push({
        name: file.name,
        path: file.response.data,
        url: file.response.data,
      });
    },
    getFiles() {
      return this.resultList;
    },
    closeViewer() {
      this.imagePreview = false;
    },

    progressFile(event, file, fileList) {
      let fileStr = {
        percent: event.percent,
        flag: false,
      };
      this.$emit("percent", fileStr);
      // if(event.percent == 100){

      // }
      // if (event.percent > 0) {
      //   this.progressBar = event.percent;
      //   this.isShowProgress = true;
      // }
      // if (event.percent == 100) {
      //   this.isShowProgress = false;
      //   // setTimeout(() => {
      //     this.progressBar = 0;
      //   // }, 1000);
      // }
      // if(this.progressBar==100)
    },

    fileBefore(file) {
      let filebeforeDate = true;
      this.$emit("filebefore", filebeforeDate);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
